<template>
  <div class="bill">
    <div>
      <el-tabs type="border-card" @tab-click="handleClick" v-loading="loading">
        <el-tab-pane label="全部" name="0">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="type_name" label="类目">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.amount>0">{{scope.row.type_name}}</el-tag>
                <el-tag type="danger" v-else>{{scope.row.type_name}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="describe" label="具体内容"></el-table-column>
            <el-table-column prop="created_at" label="时间"></el-table-column>
            <el-table-column prop="amount" label="金额"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="消费" name="2">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="type_name" label="类目">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.amount>0">{{scope.row.type_name}}</el-tag>
                <el-tag type="danger" v-else>{{scope.row.type_name}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="describe" label="具体内容"></el-table-column>
            <el-table-column prop="created_at" label="时间"></el-table-column>
            <el-table-column prop="amount" label="金额"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="充值" name="3">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="type_name" label="类目">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.amount>0">{{scope.row.type_name}}</el-tag>
                <el-tag type="danger" v-else>{{scope.row.type_name}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="describe" label="具体内容"></el-table-column>
            <el-table-column prop="created_at" label="时间"></el-table-column>
            <el-table-column prop="amount" label="金额"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="提现" name="4">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="type_name" label="类目">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.amount>0">{{scope.row.type_name}}</el-tag>
                <el-tag type="danger" v-else>{{scope.row.type_name}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="describe" label="具体内容"></el-table-column>
            <el-table-column prop="created_at" label="时间"></el-table-column>
            <el-table-column prop="amount" label="金额"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="佣金" name="1">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="type_name" label="类目">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.amount>0">{{scope.row.type_name}}</el-tag>
                <el-tag type="danger" v-else>{{scope.row.type_name}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="describe" label="具体内容"></el-table-column>
            <el-table-column prop="created_at" label="时间"></el-table-column>
            <el-table-column prop="amount" label="金额"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="this.meta.total"
        :page-size="this.meta.per_page"
        @current-change="handleCurrentChange"
        v-show="tableData.length"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      tableData: [],
      type: '0',
      sort: 'DESC',
      meta: { current_page: 1, per_page: 20 },
      loading: true
    }
  },
  computed: {},
  created () {
    this.getIntegral()
  },
  mounted () {},
  watch: {},
  methods: {
    handleClick (tab, event) {
      this.loading = !this.loading
      // console.log(tab, event);
      this.type = tab.name
      this.meta.current_page = 1
      this.getIntegral()
    },
    handleCurrentChange (val) {
      this.loading = !this.loading
      this.meta.current_page = val
      this.getIntegral()
    },
    getIntegral () {
      let page = this.meta.current_page
      let rsaStr = `type=${this.type}&page=${page}&page_size=${this.meta.per_page}&sort=${this.sort}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .getIntegral(rsaCode)
          .then(res => {
            this.loading = !this.loading
            // console.log(res);
            if (res.data.errno === '000') {
              this.tableData = res.data.result.data
              this.meta = res.data.result.meta
            } else {
              this.tableData = []
              this.meta = { current_page: 1, per_page: 20 }
            }
          })
          .catch(err => {})
      })
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
